<template>
    <div class="online-manage">
        <div class="query-form">
            <el-form ref="form" :inline="true" :model="queryForm">
                <el-form-item  label="用户名称" prop="username">
                    <el-input v-model="queryForm.username" placeholder="请输入用户名称"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="handleReset('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action"/>
            <el-table :data="onlineList" border cell-style="padding: 4px 0"  max-height="600">
                <el-table-column 
                    v-for="item in columns" 
                    :key="item.prop" 
                    :prop="item.prop" 
                    :label="item.label" 
                    :width="item.width"
                    :formatter="item.formatter" align="center"/>
                <el-table-column label="操作" width="100" align="center">
                    <template #default="scope">
                        <el-button size="mini" type="info" @click="handleForceLogout(scope.row)">强退</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                background
                layout="prev, pager, next"
                :total="pager.totalCount"
                :page-size="pager.pageSize"
                @current-change="handleCurrentChange"/>
        </div>
    </div>
</template>

<script>
import {getCurrentInstance , onMounted , reactive , ref , toRaw} from 'vue'
import utils from "../utils/utils";
export default {
    name:'online',
    setup(){
        //获取Composition API 上下文对象
        const {ctx,proxy} = getCurrentInstance();
        //初始化在线用户表单对象
        const queryForm = reactive({});
        //初始化在线用户列表数据
        const onlineList = ref([]);
        //初始化分页对象
        const pager = reactive({
            pageNum:1,
            pageSize:10
        });
        //选中在线用户列表的对象
        const checkedOnlineIds = ref([]);
        //弹框显示对象
        const showModal = ref(false);
        //定义动态表格格式
        const columns = reactive([
            {
                label: "用户名称",
                prop: "username",
                width: 150,
            },
            {
                label: "姓名",
                prop: "name",
                width: 150,
            },
            {
                label: "主机",
                prop: "ipAddr",
                width: 150,
            },
            {
                label: "访问来源",
                prop: "loginSource",
                formatter(row, column, value) {
                    return {
                        1: '安卓端',
                        2: '苹果端',
                        3: '平台端'
                    }[value]
                }
            },
            {
                label: "浏览器",
                prop: "browser"
            },
            {
                label: "浏览器版本号",
                prop: "version",
            },
            {
                label: "操作系统",
                prop: "os"
            },

            {
                label: "登陆时间",
                prop: "loginTime",
                formatter(row, column, value) {
                    return utils.formateDate(new Date(value));
                },
            }
        ]);
        //初始化接口调用
        onMounted(()=>{
            getOnlineList();
        })
        // 获取在线用户列表
        const getOnlineList = async () => {
            let params = { ...queryForm, ...pager };
            try {
                const { list, total } = await proxy.$api.getOnlineList(params);
                onlineList.value = list;
                pager.totalCount = total;
            } catch (error) {
                console.log(proxy.$api);
            }
        };
        //查询事件，获取在线用户列表
        const handleQuery = () =>{
            getOnlineList();
        }
        // 重置查询表单
        const handleReset = (form) => {
            proxy.$refs[form].resetFields();
            getOnlineList();
        };
        // 分页事件处理
        const handleCurrentChange = (current) => {
            pager.pageNum = current;
            getOnlineList();
        };
        //在线用户强退
        const handleForceLogout = async (row)=>{
            const {isForce} = await proxy.$api.forceLogout({
                identityId:row.identityId
            })
            if(isForce){
                proxy.$message.success('强退成功');
                getOnlineList();
            }else{
                proxy.$message.error('强退失败');
                getOnlineList();
            }
            
        }
        return {
            queryForm,
            onlineList,
            columns,
            pager,
            checkedOnlineIds,
            showModal,
            getOnlineList,
            handleQuery,
            handleReset,
            handleCurrentChange,
            handleForceLogout
        }
    }
}
</script>

<style lang="scss">

</style>